<template>
	<view class="scroll-view-equipmentInventory">
		<view class="navbar" ref="navbarRef">
			<fui-nav-bar isOccupy isFixed background="#0052D9" title="设备盘点" color="#fff" @leftClick="leftClick"
				@rightClick="rightClick">
				<fui-icon color="#fff" name="arrowleft"></fui-icon>
			</fui-nav-bar>
		</view>

		<view class="tabs" ref="tabsRef">
			<fui-tabs @change="change" @tap="" :tabs="tabs" isDot scroll alignLeft :short="false"></fui-tabs>
		</view>
		<scroll-view class="List" :refresher-triggered="refreshing" refresher-enabled="true" scroll-y="true"
			scroll-x="false" lower-threshold="20" @scrolltolower="onScrollToLower" @refresherrefresh="onRefresh"
			:style="{ maxHeight: screenHeight - totalHeight + 'px', top: totalHeight * 2 + 'rpx' }">
			<view class="detail" v-for="i in 13" @click="detail">
				<view class="title">电梯设备盘点任务202</view>
				<view class="bottom">
					<view class="bottomItem">
						<view class="bottomItemTitle">部门</view>
						<view class="bottomItemInfo">项目部</view>
					</view>
					<view class="bottomItem">
						<view class="bottomItemTitle">负责人</view>
						<view class="bottomItemInfo">诸葛亮</view>
					</view>
					<view class="bottomItem">
						<view class="bottomItemTitle">计划时间</view>
						<view class="bottomItemInfo">2022-07-18 10:30至2022-07-18 12:00</view>
					</view>
				</view>
				<view class="progress">
					<progress style="width: 550rpx; border: 2rpx solid #0052d9; border-radius: 20px" @tap=""
						border-radius="20" :percent="30" stroke-width="10" activeColor="#0052d9"
						backgroundColor="#fff" />
					<!-- <fuiProgress :percent="30" :height="20" ></fuiProgress> -->
					<!-- <u-line-progress  style="border:4rpx solid #0052d9;" height="20" :percentage="30"
						inactiveColor="#fff" activeColor="#0052d9" :showText="false"></u-line-progress> -->
					<view class="progressText">3/10</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	// import fuiProgress from '@/components/firstui/fui-progress/fui-progress.vue';
	import {
		reactive,
		ref,
		onMounted,
		nextTick,
		watch,
		getCurrentInstance
	} from 'vue';
	const leftClick = () => {
		uni.navigateBack();
	};
	const rightClick = () => {};
	const refreshing = () => {};

	const tabs = ref([{
			//标签显示文本（String）
			name: '待盘点'
		},
		{
			name: '盘点中'
		},
		{
			name: '待审核'
		},
		{
			name: '已完成'
		},
		{
			name: '已过期'
		},
		{
			name: '已关闭'
		}
	]);
	const detail = () => {
		uni.navigateTo({
			url: '../inventoryTasks/index'
		});
	};

	const checkIndex = ref(0);
	const change = (e) => {
		checkIndex.value = e.index;
	};

	// 获取屏幕高度
	const screenHeight = ref(0);
	const handleResize = () => {
		screenHeight.value = uni.getSystemInfoSync().windowHeight;
		console.log(screenHeight);
	};
	// 获取元素高度
	const navbarRef = ref(null);
	const tabsRef = ref(null);
	const navbarHeight = ref(0);
	const tabsHeight = ref(0);
	const totalHeight = ref(0);

	onMounted(() => {
		handleResize();

		const {
			proxy
		} = getCurrentInstance();

		const querya = uni.createSelectorQuery().in(proxy);
		const query = uni.createSelectorQuery().in(proxy);
		querya.select('.tabs').boundingClientRect((rect) => {
			tabsHeight.value = rect.height;
			totalHeight.value = tabsHeight.value + totalHeight.value;
			console.log('totalHeight.value',totalHeight.value)
		}).exec();
		query.select('.navbar').boundingClientRect((rect) => {
			navbarHeight.value = rect.height;
			totalHeight.value = navbarHeight.value + totalHeight.value;
			console.log('totalHeight.value',totalHeight.value)
		}).exec();
	});
	// 触底后新增数据
	const onScrollToLower = () => {
		uni.toast('到底了');
		console.log('触底了');
	};
	// 刷新
	const onRefresh = () => {
		uni.toast('更新数据');
	};
</script>

<style lang="scss" scoped>
	.scroll-view-equipmentInventory {
		
		// min-width: 100vh;
	}

	.tabs {
		z-index: 999;
	}

	.gap {
		width: 100%;
		height: 20rpx;
		background-color: #f6f6f6;
	}

	.List {
		position: absolute;
		background-color: #f6f6f6;
	}

	.detail {
		padding: 20rpx 30rpx;
		border-bottom: 4rpx solid #f6f6f6;
		background-color: #fff;

		.title {
			color: #0052d9;
			font-size: 35rpx;
			font-weight: bold;
		}

		.bottom {
			font-size: 25rpx;
			margin-top: 20rpx;

			.bottomItem {
				display: flex;
				margin-bottom: 20rpx;

				.bottomItemTitle {
					width: 150rpx;
				}

				.bottomItemInfo {
					width: 500rpx;
					color: #aaaaaa;
				}
			}
		}

		.progress {
			margin-top: 40rpx;
			display: flex;
			// justify-content: center;
			align-items: center;
			width: 680rpx;
			color: #aaaaaa;
			font-size: 25rpx;

			.progressText {
				margin-left: 30rpx;
			}
		}
	}
</style>